<template>
  <view class="container">
    <!-- 自定义弹窗 -->
    <CustomModal
      :visible="modalVisible"
      :title="t('index.modal.title')"
      :content="t('index.modal.not_detected_today')"
      :show-cancel="true"
      :cancel-text="t('index.modal.history_record')"
      :confirm-text="t('index.modal.go_detect')"
      @close="handleModalClose"
      @cancel="handleModalCancel"
      @confirm="handleModalConfirm" />
    <!-- 顶部banner -->
    <view class="banner">
      <image src="/static/medical-banner.png" mode="aspectFill"></image>
    </view>

    <!-- AI大模型问诊系统 -->
    <view class="ai-consultation">
      <view class="consultation-content">
        <view class="consultation-text">
          <view class="title">
            <text>{{ $t('index.title') }}</text>
            <view class="tag">{{ $t('index.clinical_certification') }}</view>
          </view>
          <text class="subtitle">{{ $t('index.subtitle') }}</text>
        </view>
        <button class="consultation-btn" @click="startAIConsultation">{{ $t('index.consult_now') }}</button>
      </view>
    </view>
    <!-- 中医辅诊 -->
    <view class="medical-diagnosis">
      <text class="section-title">{{ $t('index.tcm_assist_diagnosis') }}</text>
      <view class="diagnosis-grid">
        <view class="grid-item" @tap="startDiagnosis">
          <image src="/static/icons/pulse.png" mode="aspectFit"></image>
          <text>{{ $t('acupoint.title') }}</text>
        </view>
        <view class="grid-item" @tap="tongue">
          <image src="/static/icons/tongue-test.png" mode="aspectFit"></image>
          <text>{{ $t('index.tongue_diagnosis') }}</text>
        </view>
        <view class="grid-item" @tap="face">
          <image src="/static/icons/face-test.png" mode="aspectFit"></image>
          <text>{{ $t('index.face_diagnosis') }}</text>
        </view>

        <!-- <view class="grid-item" @tap="composite_diagnosis">
          <image src="/static/icons/detection-record.png" mode="aspectFit"></image>
          <text>{{ $t('index.composite_diagnosis') }}</text>
        </view> -->

        <!-- <view class="grid-item" @tap="noOpen">
          <image src="/static/icons/tongue-diagnosis.png" mode="aspectFit"></image>
          <text>{{ $t('index.tongue_identification') }}</text>
        </view>
        <view class="grid-item" @tap="noOpen">
          <image src="/static/icons/face-diagnosis.png" mode="aspectFit"></image>
          <text>{{ $t('index.face_identification') }}</text>
        </view>
        <view class="grid-item" @tap="noOpen">
          <image src="/static/icons/hand-diagnosis.png" mode="aspectFit"></image>
          <text>{{ $t('index.hand_diagnosis') }}</text>
        </view>
        <view class="grid-item" @tap="noOpen">
          <image src="/static/icons/body-test.png" mode="aspectFit"></image>
          <text>{{ $t('index.constitution_test') }}</text>
        </view> -->
      </view>
    </view>
    <view class="diagnosis-card" @tap="composite_diagnosis">
      <!-- Icon on the left -->
      <image class="card-icon" src="/static/icons/body-test.png" mode="aspectFit"></image>

      <!-- Container for the two lines of text -->
      <view class="text-group">
        <text class="title">{{ $t('index.diagnosis_report') }}</text>
        <text class="subtitle">{{ $t('index.composite_report_subtitle') }}</text>
      </view>
    </view>

    <!-- 中医智能辨证系统 -->
    <!-- <view class="medical-system">
      <view class="system-title">
        <text>{{ $t('index.tcm_intelligent_system') }}</text>
        <view class="tag">{{ $t('index.clinical_certification') }}</view>
      </view>
      <text class="system-subtitle">{{ $t('index.precise_detection') }}</text>
      <button class="start-btn" @tap="startDiagnosis">{{ $t('index.start_detection') }}</button>
    </view> -->
  </view>
</template>

<script setup>
  import { onReady, onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { setTabBarText } from '@/utils/setTabBarText'
  import { getDiagnoseReportStatus } from '@/api/order'
  import { useI18n } from 'vue-i18n'
  import CustomModal from '@/components/CustomModal.vue'

  const { t, locale } = useI18n()

  // 弹窗显示状态
  const modalVisible = ref(false)

  onReady(() => {
    
  })

  onShow(() => {
    setTimeout(() => {
      setTabBarText()
      // 设置标题国际化
      uni.setNavigationBarTitle({
        title: t('index.page_title')
      })
    }, 200)
  })

  const startDiagnosis = () => {
    uni.navigateTo({
      url: '/pages/zhen/index?source=acupoint'
    })
  }

  const tongue = () => {
    uni.navigateTo({
      url: '/pages/zhen/index?source=tongue'
    })
  }

  const face = () => {
    uni.navigateTo({
      url: '/pages/zhen/index?source=face'
    })
  }

  const composite_diagnosis = () => {
    getDiagnoseReportStatus().then(res => {
      // console.log(res)
      if (res.code == 200) {
        uni.navigateTo({
          url: '/pages/report/index'
        })
      } else {
        // 显示自定义弹窗
        modalVisible.value = true
      }
    })
  }

  const noOpen = () => {
    uni.showToast({ title: $t('index.not_open'), icon: 'none' })
  }

  const startAIConsultation = () => {
    uni.navigateTo({
      url: '/pages/blue/device'
    })
  }

  // 弹窗事件处理
  const handleModalClose = () => {
    modalVisible.value = false
  }

  const handleModalCancel = () => {
    modalVisible.value = false
    // 点击"历史记录"按钮
    uni.navigateTo({
      url: '/pages/record/report/index'
    })
  }

  const handleModalConfirm = () => {
    modalVisible.value = false
    // 点击"去检测"按钮
    uni.navigateTo({
      url: '/pages/blue/device'
    })
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }
  .container {
    padding: 0 15px;
  }

  .banner {
    margin-top: 15px;
    border-radius: 10px;
    overflow: hidden;

    image {
      width: 100%;
      height: 200rpx;
    }
  }

  .medical-system {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 100rpx;

    .system-title {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;

      .tag {
        background-color: #1296db;
        color: white;
        font-size: 12px;
        padding: 2px 5px;
        border-radius: 5px;
        margin-left: 10px;
      }
    }

    .system-subtitle {
      color: #999;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .start-btn {
      background-color: #1296db;
      color: white;
      border: none;
      padding: 0px 30px;
      border-radius: 8px;
      font-size: 16px;
    }
  }

  .medical-diagnosis {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .diagnosis-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 24rpx;
    }

    .grid-item {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 15px;

      image {
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
      }

      text {
        font-size: 12px;
        color: #666;
      }
    }
  }

  .ai-consultation {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;

    .consultation-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 60px;
        height: 60px;
        margin-right: 15px;
      }

      .consultation-text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        .title {
          font-size: 16px;
          font-weight: bold;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .tag {
            background-color: #1296db;
            color: white;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 5px;
            margin-left: 10px;
          }
        }

        .subtitle {
          font-size: 12px;
          color: #999;
          margin-top: 5px;
          text-align: center;
          margin-bottom: 15px;
        }
      }

      .consultation-btn {
        background-color: #1296db;
        color: white;
        border: none;
        padding: 0px 15px;
        border-radius: 8px;
        font-size: 14px;
      }
    }
  }
  .diagnosis-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 8px;
    margin-top: 15px;
    width: 100%;
    /* Subtle gradient background as requested */
    background: linear-gradient(100deg, #dfe7ee 0%, #80b7ee 100%);

    /* A light border to match the image's outline */
    border: 1px solid #f0f0f0;

    /* A subtle shadow for a bit of depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  .card-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    /* Prevents the icon from shrinking if text is long */
    flex-shrink: 0;
  }

  .text-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .title {
    font-size: 16px;
    font-weight: 500; /* semi-bold */
    color: #303133; /* Dark gray for main text */
    margin-bottom: 4px;
  }

  .subtitle {
    font-size: 12px;
    color: #606266; /* Lighter gray for secondary text */
  }
</style>
